<template>
  <c-popup v-model="modelValue">
    <view class="service-box">
      <view class="service-title">服务</view>
      <view class="content" v-for="(item, i) in props.services" :key="i">
        <view class="name">{{ item.name }}</view>
        <view class="desc">{{ item.value }}</view>
      </view>
    </view>
  </c-popup>
</template>
<script setup>
import { CImg, CNumber, CPopup } from '@/components';
import { View } from '@tarojs/components';
const modelValue = defineModel(Boolean);
const props = defineProps({
  services: Array
});
</script>
<style lang="scss">
.service-box {
  padding: 30px;
  padding-top: 20px;
  padding-bottom: max(30px, var(--safe-bottom));

  .service-title {
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    line-height: 60px;
  }
  .content {
    border-bottom: var(--onepx) solid var(--color-line);
    padding: 18px 0;
    .name {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .desc {
      font-size: 26px;
      color: var(--color-gray);
    }
  }
}
</style>
